<template>
    <div class="content-wrap">
      <!-- 学生信息 -->
      <div class="stuTable">
        <el-table
          :data="tableDatas"
          border
          height="100%"
          style="width: 100%; margin-top: 70px"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column align="center" prop="project" label="学生名字" width="150"></el-table-column>
          <el-table-column align="center" prop="score" label="身份证号" width="250"></el-table-column>
          <el-table-column align="center" prop="examState" label="考试状态"></el-table-column>
          <el-table-column align="center" prop="total" label="结束时间"></el-table-column>
          <el-table-column align="center" label="操作" width="120">
            <template #default="{ row }">
              <el-button type="text" @click="showStuTable(row)">评分</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 上传PDF -->
      <el-upload
        class="upload-demo"
        ref="upload"
        :action="uploadUrl()"
        name="file"
        :on-success="uploadSuccess"
        multiple
        :limit="10"
      >
        <el-button slot="trigger" type="primary">
          上传原始记录
          <i class="el-icon-upload el-icon--right"></i>
        </el-button>
      </el-upload>

      <!-- 点击学生弹出的信息框 -->
      <el-card
        class="box-card"
        :class="{ stuInfoTableActive: isStuInfoTableActive }"
      >
        <!-- 关闭按钮 -->
        <span class="el-icon-close" @click="close"></span>
        <!-- 学生具体信息 -->
        <el-table
          :data="tableData"
          class="elTable"
          row-key="id"
          border
          style="width: 100%;box-shadow:0px 0px 10px 5px rgba(0, 0, 0, 0.2);"
          height="355px"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column label="自动评分" align="center">
            <el-table-column align="center" prop="project" label="项目"></el-table-column>
            <el-table-column align="center" prop="score" label="得分"></el-table-column>
            <el-table-column align="center" prop="total" label="总分"></el-table-column>
            <el-table-column align="center" label="操作">
              <template #default="{ row }">
                <el-button type="text" @click="handleEdit(row)" v-show="row.children == null">编辑</el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>

        <!-- 各大项目的查看 -->
        <el-button class="subScoreBtn" type="primary" plain @click="submitScore">
          提交成绩
        </el-button>
        <el-table
          :data="stuInfo"
          row-key="id"
          border
          style="width: 100%;box-shadow:0px 3px 10px 5px rgba(0, 0, 0, 0.2);margin-top:15px;"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column label="手动评分" align="center">
            <el-table-column prop="proName" label="考试项目" width="250" align="center"></el-table-column>
            <el-table-column prop="proBtn" label="考试操作" width="350" align="center"></el-table-column>
            <el-table-column prop="proText" label="成绩录入" align="center"></el-table-column>
          </el-table-column>
        </el-table>

        <!-- 底部录入成绩的输入框 -->
        <el-table
          :data="inputScore"
          class="scoreInput"
          row-key="id"
          border
          style="width: 100%;box-shadow:0px 3px 10px 5px rgba(0, 0, 0, 0.2);margin-top:15px;"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column align="center" prop="stuName" label="考生姓名"></el-table-column>
          <el-table-column align="center" prop="stuScore" label="考生总分"></el-table-column>
          <el-table-column align="center" prop="scoreRadar" label="查看成绩分析" width="200"></el-table-column>
          <el-table-column align="center" prop="downloadPdf" label="查看成绩单" width="150"></el-table-column>
        </el-table>
      </el-card>

      <!-- 成绩修改的输入框 -->
      <div class="table" :class="{ tableShow: istableShow }">
        <span class="el-icon-close" @click="closeThis"></span>
        <label for="getScore">得分：</label>
        <input id="getScroe" type="text" ref="getScore" />
        <br />
        <!-- <button class="">确定</button> -->
        <button class="" @click="subBtn">确定</button>
      </div>

      <!-- 查看熟练程度日志 -->
      <div class="proficiencyCard" :class="{ proficiency: isProficiency }">
        <span class="el-icon-close" @click="closeThis"></span>
        <el-table
          :data="proficiencyData"
          row-key="id"
          border
          height="400"
          style="width: 100%"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="name" label="学生姓名"></el-table-column>
          <el-table-column prop="time" label="考试时间"></el-table-column>
          <el-table-column prop="operation" label="准备工作"></el-table-column>
          <el-table-column prop="detail" label="项目检定"></el-table-column>
        </el-table>
      </div>

      <!-- 报告正确性+原始数据 -->
      <div class="twoAll" :class="{ twoAllActive: isTwoAllActive }">
        <span class="el-icon-close" @click="closeThis"></span>
        <!-- 原始记录查看 -->
        <div class="pdf">
          <div class="pdf-tab">
            <el-button
              class="pdfBtn"
              type="success" plain
              icon="el-icon-refresh-right"
              style="width:80px"
              @click.stop="clock"
            >
              顺时针
            </el-button>
            <el-button class="pdfBtn" type="primary" plain icon="el-icon-arrow-left" style="width:80px" @click.stop="prePage">
              上一页
            </el-button>
            <el-button class="pdfBtn" type="primary" plain style="width:80px" @click.stop="nextPage">
              下一页
              <i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
            <el-button
              class="pdfBtn"
              type="success" plain
              icon="el-icon-refresh-left"
              style="width:80px"
              @click.stop="counterClock"
            >
              逆时针
            </el-button>
            <el-button
              class="pdfBtn"
              type="danger" plain
              icon="el-icon-tickets"
              style="width:90px"
              @click.stop="pdfPrint"
            >
              部分打印
            </el-button>
            <el-button
              class="pdfBtn"
              type="danger" plain
              icon="el-icon-document-copy"
              style="width:90px"
              @click.stop="pdfPrintAll"
            >
              全部打印
            </el-button>
          </div> 
          <div class="pageShow">{{ pageNum }}/{{ pageTotalNum }}</div>
          <pdf
            ref="pdf"
            :src="pdfUrl"
            :page="pageNum"
            :rotate="pageRotate"
            @num-pages="pageTotalNum = $event"
            @link-clicked="page = $event"
            shade: true
            style="height:200px"
          >
          </pdf>
        </div>

        <!-- 报告正确性 -->
        <div class="textTrue">
          <!-- 直流电压 -->
          <el-table
            :data="dataTrue1.items"
            :class="{ dataTrue1: isDataTrue1}"
            height="300"
            border
            style="width: 100%">
            <el-table-column label="直流电压">
              <el-table-column prop="vrange" label="量程" ></el-table-column>
              <el-table-column prop="point" label="校准点"></el-table-column>
              <el-table-column prop="section" label="区间" ></el-table-column>
            </el-table-column>
          </el-table>

          <!-- 直流电流 -->
          <el-table
            :data="dataTrue2.items"
            :class="{ dataTrue2: isDataTrue2}"
            height="300"
            border
            style="width: 100%">
            <el-table-column label="直流电流">
              <el-table-column prop="vrange" label="量程"></el-table-column>
              <el-table-column prop="point" label="校准点"></el-table-column>
              <el-table-column prop="section" label="区间"></el-table-column>
            </el-table-column>
          </el-table>

          <!-- 交流电压 -->
          <el-table
            :data="dataTrue3.items"
            :class="{ dataTrue3: isDataTrue3}"
            height="300"
            border
            style="width: 100%">
            <el-table-column label="交流电压">
              <el-table-column prop="vrange" label="量程"></el-table-column>
              <el-table-column prop="point" label="校准点"></el-table-column>
              <el-table-column prop="section" label="区间"></el-table-column>
            </el-table-column>
          </el-table>

          <!-- 交流电流 -->
          <el-table
            :data="dataTrue4.items"
            :class="{ dataTrue4: isDataTrue4}"
            height="300"
            border
            style="width: 100%">
            <el-table-column label="交流电流">
              <el-table-column prop="vrange" label="量程"></el-table-column>
              <el-table-column prop="point" label="校准点"></el-table-column>
              <el-table-column prop="section" label="区间"></el-table-column>
            </el-table-column>
          </el-table>

          <!-- 直流电阻 -->
          <el-table
            :data="dataTrue5.items"
            :class="{ dataTrue5: isDataTrue5}"
            height="300"
            border
            style="width: 100%">
            <el-table-column label="直流电阻">
              <el-table-column prop="vrange" label="量程"></el-table-column>
              <el-table-column prop="point" label="校准点"></el-table-column>
              <el-table-column prop="section" label="区间"></el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 查看成绩单 -->
      <div class="iframe" :class="{ isIframe: isIframeActive}">
        <!-- 关闭按钮 -->
        <span class="el-icon-close" @click="closeThis"></span>
        <iframe :src="iframeSrc" frameborder="0" width="100%" height="100%"></iframe>
      </div>

      <!-- 成绩分析图查看 -->
      <div class="radar" :class="{ radarActive: isRadarActive }">
        <span class="el-icon-close" @click="closeThis"></span>
        <Radar ref="msg" height="500px"/>
      </div>
    </div>
</template>

<script>
import {
  getRadarScore,
  getScoreData,
  saveScoreData,
  upScoreDate,
  setScoreData,
  getValidityData,
  getIdCard,
  getParameters,
  isScored,
} from "../../../api/api";
import pdf from "vue-pdf";
import Radar from "@/components/radar";
import { baseURL } from '../../../config/index.js';
import SockJS from "sockjs-client";
import Stomp from "stompjs";
// import axios from 'axios';

export default {
  project: "Home",
  data() {
    return {
      isStuActive: false,
      isScoreActive: false,
      isItemActive: false,
      isTitleActive: true,
      istableShow: true, // 显示输入成绩的框
      isProficiency: true, //查看熟练度的框
      isTwoAllActive: true, // 查看报告正确性+原始记录的框
      isRadarActive: true, // 查看雷达图
      isStuInfoTableActive: true, // 查看学生具体信息框
      isIframeActive: true, // 查看成绩单的iframe
      formInline: {
        item: "",
        status: "",
      },
      openeds: ["2"],
      // 单个学生具体数据
      tableData: [],
      // 学生总的一个页面
      tableDatas: [],
      // 底部的各项按钮
      stuInfo: [
        {
          proName:"熟练程度(满分10分)",
          proBtn: (
            <el-button style="width:150px" type="warning" plain onclick={() => this.showProficiency()}>
              查看熟练程度
            </el-button>
          ),
          proText:<input class="inputScore" ref="skilledScore" placeholder="请输入熟练程度成绩" />,
        },{
          proName:"原始记录(满分20分)",
          proBtn: (
            <el-button style="width:150px" type="info" plain onclick={() => this.showTowAll()}>
              查看原始记录
            </el-button>
          ),
          proText:<input class="inputScore" ref="originalScore"  placeholder="请输入原始记录成绩" />,
        },{
          proName:"报告正确性(满分20分)",
          proBtn: (
            <el-button style="width:150px" type="danger" plain onclick={() => this.showTowAll()}>
              查看报告正确性
            </el-button>
          ),
          proText:<input class="inputScore" ref="reportScore"  placeholder="请输入报告正确性成绩" />,
        },{
          proName:"实验后仪器整理(满分2分)",
          proText:<input class="inputScore" ref="mentScore"  placeholder="请输入实验后仪器整理成绩" />
        },
      ],
      // 录入成绩的输入框
      inputScore: [
        {
          stuName: <input class="stuClass" ref="stuName" readonly="true" style="width:74px"/>,
          stuScore: <input class="stuClass" ref="stuScore" readonly="true" style="width:30px"/>,
          scoreRadar: (
            <el-button style="width:150px" type="success" plain onclick={() => this.showRadar()}>
              查看成绩分析
            </el-button>
          ),
          downloadPdf:(
            <el-button type="primary" plain onclick={() => this.downloadPdf()}>
              查看成绩单
            </el-button>
          ),
        },
      ],
      // 学生熟练程度数据
      proficiencyData: [],
      tableId: "", // 存储当前行的id号
      // 下面是PDF的data
      pdfUrl: "",
      pageNum: 1,
      pageTotalNum: 1,
      pageRotate: 0,
      stuIdCard: "", // 暂时存储学生的身份证号
      stuName: "", // 暂时存储当前学生姓名
      stuExamState:"", // 暂时存储当前学生考试状态
      testId: 0, // 暂时存储某一个id方便渲染数据
      stuTotalScore: 0, // 学生总成绩
      iframeSrc: "", // 学生成绩pdf
      isDataTrue1:true,
      isDataTrue2:true,
      isDataTrue3:true,
      isDataTrue4:true,
      isDataTrue5:true,
      // 报告正确性
      // 直流电压正确性
      dataTrue1: [
        {
          items: []
        }
      ],
      // 直流电流正确性
      dataTrue2: [
        {
          items: []
        }
      ],
      // 交流电压正确性
      dataTrue3: [
        {
          items: []
        }
      ],
      // 交流电流正确性
      dataTrue4: [
        {
          items: []
        }
      ],
      // 直流电阻正确性
      dataTrue5: [
        {
          items: []
        }
      ],
    };
  },
  components: {
    pdf, // pdf组件
    Radar, // 雷达图组件
  },
  methods: {
    // 点击评分显示学生具体信息框
    showStuTable(row) {
      console.log(row);
      let scoreData=[]; // 临时存储学生的成绩
      this.stuName = row.project;
      getScoreData()
        .then((res) => {
          if (res.data.flag) {
            for (let i = 0; i < this.tableDatas.length; i++) {
              if (this.stuName == res.data.data[i].project) {
                this.testId = i; // 存储一下暂时的ID，方便后面获取学生id时候使用
                this.rowId = res.data.data[i].id; // 存储stuId
                this.stuIdCard = res.data.data[i].score;
                this.stuExamState = res.data.data[i].examState;
                this.stuTotalScore = res.data.data[i].totalScore;
                this.tableData = res.data.data[i].children;
                scoreData = res.data.data[i].manualScore;
              }
            }
            if(scoreData[0] != "暂未评分"){
              this.$refs.skilledScore.value = scoreData[0];
            }
            if(scoreData[1] != "暂未评分"){
              this.$refs.originalScore.value = scoreData[1];
            }
            if(scoreData[2] != "暂未评分"){
              this.$refs.reportScore.value = scoreData[2];
            }
            if(scoreData[3] != "暂未评分"){
              this.$refs.mentScore.value = scoreData[3];
            }
            if(this.stuExamState == "已完成考试"){
              this.$refs.stuName.value = this.stuName;
              this.$refs.stuScore.value = this.stuTotalScore;
              // console.log(this.stuTotalScore);
              this.isStuInfoTableActive = false;
            }else if(this.stuExamState == "异常结束"){
              this.examError();
            }else{
              this.examStart();
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 考试未开始的弹框
    examStart() {
      this.$message({
        message: '考生未完成考试，当前无法评分！',
        type: 'error',
        duration: 1000,
          center: true
      });
    },
    // 考试异常
    examError() {
      this.$message({
        message: '考生考试异常结束，当前无法评分！',
        type: 'error',
        duration: 1000,
          center: true
      });
    },
    // 点击每一行学生后面的详情可以进行查找这一行的学生id
    handleEdit(row) {
      this.tableId = row.tableId;
      this.istableShow = false;
    },
    // 学生具体信息窗口关闭的事件
    close: function() {
      this.isStuInfoTableActive = true;
      this.$refs.skilledScore.value = "";
      this.$refs.originalScore.value = "";
      this.$refs.reportScore.value = "";
      this.$refs.mentScore.value = "";
      this.pdfUrl = "";
      // console.log(this.pdfUrl);
    },
    // 每个小窗口关闭的事件
    closeThis: function() {
      this.istableShow = true;
      this.isProficiency = true;
      this.isTwoAllActive = true;
      this.isDataTrue1 = true;
      this.isDataTrue2 = true;
      this.isDataTrue3 = true;
      this.isDataTrue4 = true;
      this.isDataTrue5 = true;
      this.isRadarActive = true;
      this.isIframeActive = true;
    },
    // 展示日志
    showProficiency: function() {
      let name = this.stuName; // 输入的学生姓名
      getParameters(name)
        .then((res) => {
          if (res.data.flag) {
            this.proficiencyData = res.data.data;
            return { name };
          }
        })
        .catch((error) => {
          console.log(error);
        });
      this.isProficiency = false;
    },
    // 展示报告正确性+原始记录
    showTowAll: function() {
      let pdfId = this.stuIdCard;
      let stuId = this.rowId;
      getIdCard(pdfId)
        .then((res) => {
          this.pdfUrl = baseURL+ "/stu/pdf/" + pdfId;
          if (res.data.flag) {
            return pdfId;
          }
        })
        .catch((error) => {
          console.log(error);
        });
      getValidityData(stuId).then((res) => {
        if (res.data.flag) {
          // console.log(res.data.data);
          for(var dataI = 0;dataI < res.data.data.length;dataI++){
            if(res.data.data[dataI].project == "直流电压"){
              this.dataTrue1 = res.data.data[dataI];
              this.isDataTrue1 = false;
            } else if (res.data.data[dataI].project == "直流电流"){
              this.dataTrue2 = res.data.data[dataI];
              this.isDataTrue2 = false;
            } else if (res.data.data[dataI].project =="交流电压"){
              this.dataTrue3 = res.data.data[dataI];
              this.isDataTrue3 = false;
            } else if (res.data.data[dataI].project == "交流电流"){
              this.dataTrue4 = res.data.data[dataI];
              this.isDataTrue4 = false;
            } else {
              this.dataTrue5 = res.data.data[dataI];
              this.isDataTrue5 = false;
            }
          }
          return stuId;
        }
      });
      this.isTwoAllActive = false;
    },
    // 展示成绩分析
    showRadar: function() {
      let idCard = this.stuIdCard;
        if (idCard === "") {
            this.$message({
                message: '网络故障，请刷新页面！(￣▽￣)',
                type: 'warning',
                center: true
            });
            return
        }
      isScored(idCard)
        .then((res) => {
          if(res.data.flag){
            let name = this.stuName;
            getRadarScore(name)
              .then((res) => {
                if (res.data.flag) {
                  this.$refs.msg.getMsg({
                    stuName: this.stuName, // 传给子组件学生名
                    scoreData: res.data.data, // 传给子组件
                  });
                  return name;
                }
              })
              .catch((error) => {
                console.log(error);
              });
            this.isRadarActive = false;
            return idCard;
          }else{
            this.scoreFalse();
            return idCard;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 点击提交成绩按钮，返回输入的成绩
    submitScore: function() {
      let skilledScore = this.$refs.skilledScore.value; // 存储熟练程度成绩
      let originalScore = this.$refs.originalScore.value; // 原始记录成绩
      let reportScore = this.$refs.reportScore.value; // 报告正确性成绩
      let mentScore = this.$refs.mentScore.value; // 实验后仪器整理成绩
      if(skilledScore == "" || originalScore == "" || reportScore == "" || mentScore == ""){
        this.$message({
          message: "未完成评分，请完成所有评分！",
          type: "error",
            center: true
        });
      } else {
        if(skilledScore > 10){
        this.$message({
          message: "熟练度成绩总分不能超过10分，请重新输入！",
          type: "error",
            center: true
        });
      } else if (originalScore > 20) {
        this.$message({
          message: "原始记录成绩总分不能超过20分，请重新输入！",
          type: "error",
            center: true
        });
      } else if (reportScore > 20) {
        this.$message({
          message: "报告正确性成绩总分不能超过20分，请重新输入！",
          type: "error",
            center: true
        });
      } else if (mentScore > 2) {
        this.$message({
          message: "实验后仪器整理成绩总分不能超过2分，请重新输入！",
          type: "error",
            center: true
        });
      } else {
        this.$message({
          message: "成绩提交成功！",
          type: "success",
            center: true
        });
        let scoreData = {
          name: this.stuName,
          scores: [skilledScore, originalScore, reportScore, mentScore],
        };
        saveScoreData(scoreData)
          .then((res) => {
            if (res.data.flag) {
              this.upData();
              return scoreData;
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
      }
    },
    // 确认修改成绩
    subBtn: function() {
      let tableId = this.tableId; // 存储一下获取的行的id
      let score = this.$refs.getScore.value; //存储输入的新的分数
      let stuId = this.stuIdCard;
      // let that = this;
      setScoreData(score, tableId)
        .then((res) => {
          if (res.data.flag) {
            upScoreDate(stuId)
              .then((res)=>{
                if(res.data.flag){
                  this.upData();
                }
              })
              .catch((err)=>{
                console.log(err);
              })
            return { score, tableId };
          }
        })
        .catch((err) => {
          console.log(err);
        })
    //   setScoreData(1, 10664).then(res => {
    //     console.log("提交修改分数")
    //     if (res.data.flag) {
    //         upScoreDate("510726199112123456").then(res => {
    //             if (res.data.flag) {
    //                 getScoreData().then(res => {
    //                     console.log(res.data)
    //                 }).catch();
    //             }
    //         }).catch()
    //     }
    // }).catch()
      this.$refs.getScore.value = ""; // 清空输入框
      this.istableShow = true;
    },
    // 查看pdf前先判断成绩是否录入成功
    downloadPdf(){
      let idCard = this.stuIdCard;  
        if (idCard === "") {
            this.$message({
                message: '网络故障，请刷新页面！(￣▽￣)',
                type: 'warning',
                center: true
            });
            return
        }
      isScored(idCard)
        .then((res) => {
          if(res.data.flag){
            // this.scoreTrue();
            this.isIframeActive = false;  
            this.iframeSrc = baseURL + '/stu/transcript/' + idCard;
            // window.open(baseURL + '/stu/transcript/' + idCard,"_blank");
            // 下载pdf
            // axios({
            //   url: baseURL + '/stu/transcript/' + idCard,
            //   method: 'get',
            //   responseType: 'blob'
            // })
            // .then(res => {
            //   // 假设 data 是返回来的二进制数据
            //   const url = window.URL.createObjectURL(new Blob([res.data]));
            //   let link = document.createElement('a');
            //   link.style.display = 'none';
            //   link.href = url;
            //   link.download= this.stuName + '-成绩单.pdf'; //docNumber 动态文件名
            //   document.body.appendChild(link);
            //   link.click();
            //   return idCard;
            // })
            return idCard;
          }else{
            this.scoreFalse();
            return idCard;
          }
        })
        .catch((error) => {
          console.log(error);
        });
      this.iframeSrc = "";
    },
    // 下载成绩单成功提示
    // scoreTrue() {
    //   this.$message({
    //     message: '完成评分,成功下载成绩单！',
    //     type: 'success',
    //     duration: 1000,
    //   });
    // },
    // 评分失败提示
    scoreFalse() {
      this.$message({
        message: '请先完成评分！',
        type: 'error',
        duration: 1000,
          center: true
      });
    },
    // 下面是PDF的方法
    prePage() {
      var p = this.pageNum;
      p = p > 1 ? p - 1 : this.pageTotalNum;
      this.pageNum = p;
    },
    nextPage() {
      var p = this.pageNum;
      p = p < this.pageTotalNum ? p + 1 : 1;
      this.pageNum = p;
    },
    clock() {
      this.pageRotate += 90;
    },
    counterClock() {
      this.pageRotate -= 90;
    },
    pdfPrintAll() {
      this.$refs.pdf.print();
    },
    pdfPrint() {
      this.$refs.pdf.print(100, [1, 2]);
    },
    // 上传PDF文件
    uploadUrl: function() {
      return baseURL + "/file/pdf";
    },
    // 上传pdf
    uploadSuccess() {
      getScoreData()
        .then((res) => {
          if (res.data.flag) {
            this.tableDatas = res.data.data;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    upData(){
      getScoreData()
        .then((res) => {
          if (res.data.flag) {
            // console.log(res.data);
            this.tableDatas = res.data.data;
            this.tableData = res.data.data[this.testId].children;
            for(let i = 0;i < res.data.data.length;i++){
              if(this.testId == i){
                this.$refs.stuScore.value = res.data.data[i].totalScore;
                // console.log(res.data.data[i].totalScore);
              }
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }
  },
  mounted: function() {
    // 页面加载时渲染数据
    this.upData();
    let socket = new SockJS(baseURL + "/endpoint-websocket");
    this.stompClient = Stomp.over(socket);
    // this.stompClient.debug = null;
    this.stompClient.connect({}, () => {
      this.stompClient.subscribe("/scoreData", () => {
        this.upData();  
      });
    });
  },
};
</script>

<style scoped>
.el-col {
  width: 100.2%;
}


/* 修改信息框 */
.table {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -170px;
  margin-left: -140px;
  padding: 70px;
  text-align: right;
  width: 280px;
  height: 100px;
  background-color: rgb(222, 241, 237);
  z-index: 10;
}

.table span {
  top: 20px;
  right: 20px;
  position: absolute;
  cursor: pointer;
}

.table input[type="text"] {
  margin: 10px;
  width: 200px;
  height: 25px;
  border: 0;
  outline: none;
}

.table input[type="checkbox"] {
  margin: 10px;
}

.table button {
  width: 80px;
  height: 30px;
  cursor: pointer;
  margin-top: 20px;
  margin-right: 10px;
  border: 0;
  outline: none;
  color: #fff;
  background-color: #40b585;
}

/* 下面是日志显示 */
.proficiencyCard {
  position: absolute;
  padding: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 55rem;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 11;
}

.proficiencyCard span {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 25px;
  color: #fff;
  cursor: pointer;
}

.proficiencyCard span:hover {
  font-weight: bolder;
}

.proCard {
  height: 555px;
  overflow-y: scroll;
}

.tableShow {
  display: none;
}

.proficiency {
  display: none;
}

/* 原始记录+报告正确性 */
.twoAll {
  position: absolute;
  padding: 20px 20px 20px 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: rgb(221, 229, 238);
  width: 80rem;
  height: 85%;
  overflow-y: scroll;
  text-align: center;
  z-index: 10;
}

.twoAll span {
  position: absolute;
  top: 10px;
  right: 10px;
  color: rgb(240, 183, 183);
  font-size: 25px;
  cursor: pointer;
}

.twoAll span:hover {
  color: red;
  font-weight: bold;
}

/* 原始记录+报告正确性显示隐藏 */
.twoAllActive {
  display: none;
}

/* pdf的样式 */
.pdf {
  width: 52%;
  float: left;
}

.pdfBtn {
  padding: 0;
  margin-bottom: 20px;
  width: 90px;
  height: 40px;
  font-size: 13px;
  text-align: center;
}

/* 页码展示 */
.pageShow {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #1f4c63;
  font-size: 20px;
}

/* 上传PDF按钮样式 */
.upload-demo {
  position: absolute;
  top: 70px;
}

/* 报告正确性 */
.textTrue {
  position: relative;
  top: 70px;
  float: right;
  width: 47%;
  height: 136%;
  overflow-y: scroll;
}

/* 查看成绩单 */
.iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80rem;
  height: 45rem;
  z-index: 10;
}

.iframe span{
  position: absolute;
  top: 0px;
  right: 0px;
  color: rgb(238, 81, 112);
  cursor: pointer;
  font-size: 30px;
}

.iframe span:hover{
  color: red;
  font-weight: bolder;
  box-shadow: 1px 1px 10px 10px rgba(255, 255, 255 ,.5);
}

.isIframe{
  display: none;
}

/* 成绩分析图显示隐藏 */
.radar {
  padding: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50%);
  width: 1000px;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 15;
}

.radar span {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #fff;
  font-size: 25px;
  cursor: pointer;
}

.radar span:hover {
  font-weight: bolder;
}

.radarActive {
  display: none;
}

/* 确认按钮 */
.returnData {
  padding: 0 10px;
  width: 150px;
  height: 35px;
  background-color: #f5f7fa;
  border: 0;
  font-size: 16px;
  outline: none;
}

/* 学生具体信息表格 */
.box-card {
  position: absolute;
  padding: 0px 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 70rem;
  height: 43rem;
  overflow-y: scroll;
  z-index: 5;
}

/* 成绩提交按钮 */
.subScoreBtn{
  position: absolute;
  right: 50px;
  top: 395px;
  z-index: 1;
}

.box-card span {
  position: absolute;
  top: 3px;
  right: 3px;
  color: rgb(231, 121, 143);
  cursor: pointer;
  font-size: 25px;
}

.box-card span:hover {
  color: red;
  font-weight: bolder;
}

input::placeholder{
  color: #ccc;
}

/* 学生隐藏显示控制的类名 */
.stuInfoTableActive {
  display: none;
}

/* 学生成绩提交，输入框 */
.inputScore {
  padding: 0 20px;
  width: 160px;
  height: 35px;
  border: 1px solid #e6e9ec;
  outline: none;
}

.scoreInput tr:hover .stuClass{
  background-color: #f5f7fa;
}

.stuClass {
  border: 0;
  outline: none;
}

.dataTrue1,.dataTrue2,.dataTrue3,.dataTrue4,.dataTrue5{
  display: none;
}
</style>
